.game {
    padding: 0 40rpx;

    .at-input {
        margin-left: 0;
        padding: 16rpx 0;
        border: 0 solid #e6e6e6;
        border-bottom-width: 1rpx;
    }

    .title {
        text-align: center;
        color: #6190e8;
        padding: 20rpx 0;
    }

    .expain {
        font-size: 24rpx;
        color: #7b7b7b;
        padding: 40rpx 0;
        margin-bottom: 160rpx;
    }

    .footer {
        padding: 40rpx;
        box-sizing: border-box;
    }
}

.game-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 100rpx 0;

    .card-item {
        position: relative;
        flex: 0 0 30%;
        height: 100rpx;
        line-height: 100rpx;
        font-size: 36rpx;
        text-align: center;
        box-sizing: border-box;
        margin: 1.5%;
        color: #fff;
        animation: all 1s;
        perspective: 500;
        backface-visibility: hidden;
    }

    .front {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: all 1s;
        border-radius: 10rpx;

        background: #92b901;
        border: 1px solid #eee;
        backface-visibility: hidden;

    }

    .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: all 1s;
        border-radius: 10rpx;
        background-color: #6190e8;
        transform: rotateY(-180deg);
        backface-visibility: hidden;

    }

    .animation-rotate-f {
        transform: rotateY(-180deg);

    }

    .animation-rotate-b {
        transform: rotateY(-360deg);

    }
}
